<template>
	<view class="content">
		<!-- 页面加载组件 -->
		<u-loading-page :loading="loading"></u-loading-page>
		<view v-if="!loading">
			<view class="title">
				<view class="images">
					<image src="http://oss.tzfcw.top/Fk-RjJoirWJTjH8ICxbEcwK8e_75"></image>
				</view>
			</view>

			<view>
				<view class="survers" v-if="data[0]!=null">
					<!-- 做组件封装 -->
					<view v-for="(item,index) in data[0].topicVoList" :key="item.id" v-if="listAreaStatus">
						<view class="question">
							<u--text :text="generateQuestionName(item.questionName,index)"></u--text>
						</view>
						<view class="answer">
							<u-radio-group placement="column">
								<u-radio :customStyle="{marginBottom: '8px'}" v-for="(children) in item.answerList"
									:key="children.id" :label="children.answerContent" :name="children.answerContent"
									@change="radioChange(children,index)" activeColor="#1ba784">
									{{children.answerContent}}
								</u-radio>
							</u-radio-group>
						</view>
					</view>
				</view>
				<view v-if="nodataStatus" class="nodata">
					<image class="nodataImg" src="../../static/images/nodata.png" mode="aspectFit"></image>
				</view>
				<view class="submit">
					<u-button text="提交" color="#1ba784" :plain="true" :hairline="true" shape="circle"
						@click="SubmitSurvey()" v-if="buttonStatus"></u-button>
				</view>
			</view>
		</view>
		<!-- 消息提示组件 -->
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				checkboxValue1: [],
				// 基本案列数据
				checkboxList1: [{
						name: '苹果',
						disabled: false
					},
					{
						name: '香蕉',
						disabled: false
					},
					{
						name: '橙子',
						disabled: false
					}
				],
				//保存调查问卷的数据
				data: [""],
				//保存每个选项的值
				checkValue: [],
				// 判断表单是否可提交
				isAllFlag: true,
				buttonStatus: false,
				//判断数据加载完毕
				loading: true,
				// 用户标记数据是否加载完毕，与上面作用相同
				listAreaStatus: false,
				//无数据标记
				nodataStatus: false,
				ToastList: [{
					type: 'success',
					title: '成功主题(带图标)',
					message: "提交成功ヾ(◍°∇°◍)ﾉﾞ!,目前页面还存在些bug,正在想办法修复",
					duration: 2500,
					iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/success.png',
				}, {
					type: 'error',
					title: '失败主题',
					message: "提交失败,请登录后再次尝试╥﹏╥",
					duration: 2500,
					iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/error.png'
				}]
			};
		},
		onLoad(options) {
			//TODO 加载时,这里先写死id
			this.getSurvey()
		},
		methods: {
			// 消息提示框
			showToast(params) {
				this.$refs.uToast.show({
					...params,
				})
			},
			//根据index和item生成问题标签
			generateQuestionName(item, index) {
				return `${index+1}. ${item}`;
			},
			SubmitSurvey() {
				// 提交之前先对checkValue进行判断
				this.checkValue.forEach(t => {
					if (t === "") {
						this.isAllFlag = false;
					}
				})
				//如果为true
				//发起网络请求
				this.$request("/survey/save", "POST", {
					...this.data[0],
				}, {
					"content-type": "application/json",
					"token": uni.getStorageSync("token")
				}).then(res => {
					//成功之后,这里返回的boolean值
					console.log(res.data)
					//让this.data清空
					this.data = [];
					//同时让按钮消失
					this.buttonStatus = false;
					console.log(this.buttonStatus);
					//弹出消息框,告诉用户已成功提交
					this.nodataStatus = true;
					this.showToast(this.ToastList[0]);
				}).catch(error => {
					this.showToast(this.ToastList[1]);
				})
				//再变回为true
				this.isAllFlag = true;
			},
			radioChange(item, index) {
				this.checkValue[index] = item.id;
				console.log(this.checkValue[index]);
			},
			getSurvey() {
				this.$request(`/survey/query/new`, "GET", {}, {}).then(res => {
					this.data = res.data.data.records;
					this.checkValue = new Array(this.data[0].topicVoList.length).fill("");
					//设置为加载完毕
					this.loading = false;
					this.buttonStatus = true;
					this.listAreaStatus = true;
				}).catch(error => {
					this.loading = true;
					console.log(error);
				})
			}
		},
	}
</script>

<style lang="scss" scoped>
	.content {
		.title {
			width: 100%;
			height: 30%;

			.images {
				width: 100%;
				height: 100%;

				image {
					width: 90%;
					height: 180rpx;
					padding: 3% 5%;
				}
			}
		}

		.surveys {
			padding-left: 5%;
			margin-top: 5%;
		}

		.nodata {
			width: 100%;
			height: 40%;

			.nodataImg {
				width: 100%;
			}
		}

	}

	.answer {
		margin-left: 5%;
		margin-top: 2%;
	}

	.question {
		margin-left: 5%;
		margin-top: 2%;
	}

	.submit {
		padding: 5% 20%;
	}
</style>